<template>
  <div id="chart" ref="chart"></div>
</template>

<script>
export default {
  name: 'LineChartView',
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  mounted(){
    this.initChart()
  },
  methods: {
    initChart() {
      const myChart = this.$echarts.init(this.$refs.chart);
      const option = {
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      myChart.setOption({...option,...this.option});
    }
  }
}
</script>
<style scoped>
#chart {
  width: 100%;
  height: 100%;
}
</style>